<template>
  <div class="slider">

    <img ref="flower" class="flower" src="/static/img/poster/flower.png" alt="">

    <img ref="s1" class="s1" src="/static/img/poster/s1.png" alt="">

    <img ref="s1T1" class="s1-t1" src="/static/img/poster/s1-t1.png" alt="">

    <img ref="s1T2" class="s1-t2" src="/static/img/poster/s1-t2.png" alt="">

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { SliderComponents } from '../types'
import { addClass, removeClass } from '@/utils/index'

@Component({
  name: 'Slider1',
})
export default class extends Vue implements SliderComponents {
  animate() {
    const flower = this.$refs.flower as HTMLElement
    addClass(flower, 'animated slideInLeft')
    removeClass(flower, 'hide')

    const s1 = this.$refs.s1 as HTMLElement
    addClass(s1, 'animated fadeIn')
    removeClass(s1, 'hide')

    const s1T1 = this.$refs.s1T1 as HTMLElement
    addClass(s1T1, 'animated bounceIn')
    removeClass(s1T1, 'hide')

    const s1T2 = this.$refs.s1T2 as HTMLElement
    addClass(s1T2, 'animated fadeIn')
    removeClass(s1T2, 'hide')
  }

  animated() {
    const flower = this.$refs.flower as HTMLElement
    removeClass(flower, 'animated slideInLeft')
    addClass(flower, 'hide')

    const s1 = this.$refs.s1 as HTMLElement
    removeClass(s1, 'animated fadeIn')
    addClass(s1, 'hide')

    const s1T1 = this.$refs.s1T1 as HTMLElement
    removeClass(s1T1, 'animated bounceIn')
    addClass(s1T1, 'hide')

    const s1T2 = this.$refs.s1T2 as HTMLElement
    removeClass(s1T2, 'animated fadeIn')
    addClass(s1T2, 'hide')
  }
}
</script>

<style>

</style>
